<template>
    <section id="k8s-secrets">
        <el-card style="margin-bottom: 20px; background-color: #FAFAFA;">
            <div>详情</div>
            <hr>
            <div style="margin-bottom: 5px">名称：{{SecertDetail.secret.name}}</div>
            <div style="margin-bottom: 5px">命名空间：{{SecertDetail.secret.namespace}}</div>

            <div style="margin-bottom: 5px">注释：
                <span v-if="SecertDetail.secret.annotation !== null">
                <el-tag size="mini" v-for="(v,key) in SecertDetail.secret.annotation "> {{key}}: {{v}}</el-tag>
                </span>
                <span v-else>--</span>
            </div>

            <div style="margin-bottom: 5px">创建时间：{{SecertDetail.secret.createdate}}</div>



        </el-card>

        <el-card style="margin-bottom: 20px; background-color: #FAFAFA;">
            <div>数据</div>
            <hr>
            <div v-for="(v,key) in SecertDetail.secret.data " style="margin-bottom: 10px">
                <el-row>
                    <el-col :span="2.5">
                        <i class="fa fa-eye-slash eye-click" style="font-size:15px" @click="viewSecretData(v)" v-if="v.visible"></i>
                        <i class="fa fa-eye eye-click" style="font-size:15px" @click="viewSecretData(v)" v-else></i>

                <span style="font-weight: 600">&nbsp;&nbsp;{{key}}:&nbsp;&nbsp;</span>
                    </el-col>
                    <el-col :span="20">
                <span v-if="v.visible" v-html="lineBreak(v.content)"></span>
                <span v-else> {{v.length}} 字节</span>
                    </el-col>
                </el-row>
            </div>



        </el-card>


    </section>
</template>

<script>
    import { k8sSecretData } from '../../api/api'
    export default {
        data() {
            return {
                SecertDetail: {
                    secret:{},


                },
                secretVisible:false,
            }
        },
        methods: {

            getK8sSecretDetailData(){
                let self = this
                let param = {name:this.$route.params.name,namespace:this.$route.query.namespace}
                k8sSecretData(param).then((res) => {
                    console.log(res)
                    self.SecertDetail.secret = res.secret




                })

            },
            rowStyle({ row, rowIndex}){
                return "height:40px;"
            },
            headerStyle({ row, rowIndex}){
                return "height:20px;color:#0099FF;"
            },
            viewSecretData(v){
                let self =this
                // this.secretVisible = !this.secretVisible
                v.visible = !v.visible
            },
            lineBreak(str){
                return str.replace(/\n/gm,"<br/>")
            }

        },
        mounted: function () {
            console.log(this.$route.params.name)
            console.log(this.$route.query.namespace)
            this.getK8sSecretDetailData()
        }
    }
</script>

<style scoped>
    #k8s-secrets .minizisesize{
        -webkit-transform: scale(0.6) !important;
    }
    #k8s-secrets .eye-click:hover {
        cursor: pointer;
    }

</style>